//
//  BiliMine.swift
//  Landmarks
//
//  Created by 温哲 on 2021/2/10.
//

import SwiftUI

struct BiliMine: View {
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Spacer()
                    Button(action: {
                        print("第一个")
                    }
                    ) {
                        Image(systemName: "qrcode").resizable().foregroundColor(Color(hex: 0xFF999999)).frame(width: 20, height: 20)
                    }
                    .frame(width: 35.0, height: 35.0)
                    Button(action: {
                        print("第二个")
                    }
                    ) {
                        Image(systemName: "circles.hexagonpath").resizable().foregroundColor(Color(hex: 0xFF999999)).frame(width: 20, height: 20)
                    }
                    .frame(width: 35.0, height: 35.0)
                    Button(action: {
                        print("第三个")
                    }
                    ) {
                        Image(systemName: "moon").resizable().foregroundColor(Color(hex: 0xFF999999)).frame(width: 20, height: 20)
                    }
                    .frame(width: 35.0, height: 35.0)
                }
                HStack {
                    Image("turtlerock").resizable().clipShape(Circle())
                        .ignoresSafeArea(.keyboard, edges: .top).frame(width: 80, height: 80, alignment: .center).padding(.trailing, 6.0)
                    VStack(alignment: .leading) {
                        HStack {
                            Text("昵称")
                                .fontWeight(.black)
                            Text("Lv5").foregroundColor(Color.orange)
                        }
                        Text("正式会员")
                            .foregroundColor(Color(hex: 0xFFFF00FF))
                            .padding(EdgeInsets(top: 2, leading: 4, bottom: 2, trailing: 4))
                            .overlay(
                                RoundedRectangle(cornerRadius: 3, style: .continuous)
                                    .stroke(Color(hex: 0xFFFF00FF), lineWidth: 1)
                            )
                        
                        Text("B币:0 硬币:100").foregroundColor(Color(hex: 0xFF666666))
                    }
                    Spacer()
                    
                    Button(action: {
                        print("空间")
                    }
                    ) {
                        Text("空间 ").foregroundColor(Color(hex: 0xFF666666))
                        Image(systemName: "chevron.right").resizable().foregroundColor(Color(hex: 0xFF999999)).frame(width: 10, height: 15)
                    }
                    .frame(width: 55.0, height: 35.0)
                    /// 富文本
                    // Text("空间  ").foregroundColor(Color(hex: 0xFF666666)) + Text(">").foregroundColor(Color(hex: 0xFF555555))
                }
                HStack(alignment: .center) {
                    BiliHeaderDynamic(name: "动态", num: 20)
                    Text("|").foregroundColor(Color(hex: 0xFF999999))
                    BiliHeaderDynamic(name: "关注", num: 200)
                    Text("|").foregroundColor(Color(hex: 0xFF999999))
                    BiliHeaderDynamic(name: "粉丝", num: 20)
                }
                ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
                    Image("purse_background").resizable().frame(height: 60)
                    VStack(alignment: .leading) {
                        Text("贺新春！大会员首年108元！").foregroundColor(Color(hex: 0xFFFF00FF)).padding(.leading, 14.0)
                        Text("参与活动最高再赠12").font(Font.custom("PingFangSC-Regular", fixedSize: 14)).foregroundColor(Color(hex: 0xFFF781BE)).padding(.leading, 14.0)
                    }
                    
                    HStack {
                        Spacer()
                        Image(systemName: "chevron.right").resizable().foregroundColor(Color(hex: 0xFFFF00FF)).frame(width: 10, height: 15).padding(.trailing, 14)
                    }
                    
                }).overlay(
                    RoundedRectangle(cornerRadius: 3, style: .continuous)
                        .stroke(Color(hex: 0xFFF781BE), lineWidth: 0.5)
                )
                Spacer()
            }
            // showsIndicators 显示隐藏 滚动条
            ScrollView(showsIndicators: false) {
                VStack(alignment: .leading) {
                    HStack {
                        BiliSCHeaderItem(name: "离线缓存", image: Image(systemName: "square.and.arrow.down"),imageColor: Color(hex: 0xff00BFFF),size: CGSize(width: 25, height: 25))
                        Spacer()
                        BiliSCHeaderItem(name: "历史记录", image: Image(systemName: "clock"),imageColor: Color(hex: 0xff00BFFF),size: CGSize(width: 25, height: 25))
                        Spacer()
                        BiliSCHeaderItem(name: "我的收藏", image: Image(systemName: "star"),imageColor: Color(hex: 0xff00BFFF),size: CGSize(width: 25, height: 25))
                        Spacer()
                        BiliSCHeaderItem(name: "稍后再看", image: Image(systemName: "play.circle"),imageColor: Color(hex: 0xff00BFFF),size: CGSize(width: 25, height: 25))
                    }
                    .padding(.horizontal, 20.0)
                    
                    HStack {
                        Text("创作中心")
                            .fontWeight(.medium)
                        Spacer()
                        
                        Button(action: {
                            print("发布")
                        }
                        ) {
                            Image(systemName: "tray.and.arrow.up").resizable().foregroundColor(.white).frame(width: 25.0, height: 15.0)
                            Text("发布").foregroundColor(.white)
                        }
                        .padding().frame(width: 100.0, height: 40.0).background(Color(hex: 0xFFF781BE)).cornerRadius(20.0).shadow(radius: 10)
                    }.padding(.top, 10)
                    HStack {
                        BiliSCHeaderItem(name: "创作首页", image: Image(systemName: "lightbulb"),imageColor: Color(hex: 0xffffbf00),size: CGSize(width: 20, height: 25))
                        Spacer()
                        BiliSCHeaderItem(name: "稿件管理", image: Image(systemName: "folder.badge.gear"),imageColor: Color(hex: 0xffffbf00),size: CGSize(width: 30, height: 25))
                        Spacer()
                        BiliSCHeaderItem(name: "打卡挑战", image: Image(systemName: "externaldrive.connected.to.line.below"),imageColor: Color(hex: 0xffffbf00),size: CGSize(width: 30, height: 25))
                        Spacer()
                        BiliSCHeaderItem(name: "有奖活动", image: Image(systemName: "wand.and.rays.inverse"),imageColor: Color(hex: 0xffffbf00),size: CGSize(width: 25, height: 25))
                    }
                    .padding([.top, .leading, .trailing], 20.0)
                    BiliRecommend()
                    Text("更多服务").fontWeight(.medium)
                        .padding(.vertical, 20.0)
                    
                    BiliServiceList(serviceList: [CommonModel(id: 0, name: "联系客服", image: "star", tipsNum: 0), CommonModel(id: 1, name: "课堂模式", image: "star.fill", tipsNum: 0), CommonModel(id: 2, name: "青少年模式", image: "star", tipsNum: 0), CommonModel(id: 3, name: "设置", image: "star", tipsNum: 0)])
                }
            }
            .padding(.top, 260.0)
        }
        .padding(.horizontal, 15.0)
    }
}

struct BiliMine_Previews: PreviewProvider {
    static var previews: some View {
        BiliMine()
    }
}
